<template>
    <div>
        <div id="allData"></div>
    </div>
</template>

<script setup lang="ts">
import { Chart } from '@antv/g2';
import { onMounted } from 'vue';

const data = [
    { company: '等候人数', type: '胃外科', value: 30 },
    { company: '待缴费', type: '胃外科', value: 55 },
    { company: '复诊', type: '胃外科', value: 60 },


    { company: '等候人数', type: '口腔科', value: 35 },
    { company: '待缴费', type: '口腔科', value: 35 },
    { company: '复诊', type: '口腔科', value: 88 },

    { company: '等候人数', type: '内镜科', value: 28 },
    { company: '待缴费', type: '内镜科', value: 288 },
    { company: '复诊', type: '内镜科', value: 228 },

    { company: '等候人数', type: '皮肤科', value: 240 },
    { company: '待缴费', type: '皮肤科', value: 480 },
    { company: '复诊', type: '皮肤科', value: 490 },

    { company: '等候人数', type: '中西医科', value: 625 },
    { company: '待缴费', type: '中西医科', value: 635 },
    { company: '复诊', type: '中西医科', value: 52 },

    { company: '等候人数', type: '头颈外科', value: 347 },
    { company: '待缴费', type: '头颈外科', value: 147 },
    { company: '复诊', type: '头颈外科', value: 437 },

    { company: '等候人数', type: '妇科', value: 233 },
    { company: '待缴费', type: '妇科', value: 233 },
    { company: '复诊', type: '妇科', value: 293 },

    { company: '等候人数', type: '外科综合', value: 118 },
    { company: '待缴费', type: '外科综合', value: 128 },
    { company: '复诊', type: '外科综合', value: 138 },

    { company: '等候人数', type: '呼吸道科', value: 250 },
    { company: '待缴费', type: '呼吸道科', value: 240 },
    { company: '复诊', type: '呼吸道科', value: 210 },

    { company: '等候人数', type: '五官科', value: 120 },
    { company: '待缴费', type: '五官科', value: 230 },
    { company: '复诊', type: '五官科', value: 720 },


];

onMounted(() => {
    const chart = new Chart({
        container: 'allData',
        autoFit: true,
        height: 270,
    });

    chart.data(data);

    chart.scale('value', { nice: true, });

    chart.legend({
        position: 'top'
    });

    chart.tooltip({
        showMarkers: false,
    });

    chart
        .interval()
        .position('type*value').color('company')
        .adjust([{
            type: 'dodge',
            marginRatio: 0
        }]);

    chart.interaction('element-list-highlight');

    chart.render();

})
</script>

<style scoped>

</style>